<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
    <link href="../../css/bootstrap.min.css" rel="stylesheet"/>
    <link href="../../css/font-awesome.css" rel="stylesheet"/>

    <!-- Data Tables -->
    <link href="../../css/style.css" rel="stylesheet"/>
    <!-- Sweet Alert -->
    <link href="../../css/plugins/sweetalert/sweetalert.css" rel="stylesheet"/>

    <link href="../../css/animate.css" rel="stylesheet"/>
    <link href="../../css/style.css?v=4.1.0" rel="stylesheet"/>
    <style type="text/css">
        table, th {
            font-size: 14px;
            text-align: center;
            min-width: 100px;
        }
        *{
            font-size: 15px;
        }
    </style>
</h:head>
<h:body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>课程列表</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link"> <i class="fa fa-chevron-up"></i>
                            </a> <a class="dropdown-toggle" data-toggle="dropdown"
                                    href="table_basic.html#"> <i class="fa fa-wrench"></i>
                        </a> <a class="close-link"> <i class="fa fa-times"></i>
                        </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <h:form>
                            <h:dataTable value="#{course.optionalCoursesList}" var="cour" cellspacing="0"
                                         cellpadding="5px" rules="all" border="4" frame="border" width="100%"
                                          class="table table-striped table-bordered table-hover dataTables-example dataTable">
                                <h:column>
                                    <f:facet name="header">编号</f:facet>
                                    <h:outputText value="#{cour.id}"/>
                                </h:column>
                                <h:column>
                                    <f:facet name="header">名称</f:facet>
                                    <h:outputText value="#{cour.name}"/>
                                </h:column>
                                <h:column>
                                    <f:facet name="header">学分</f:facet>
                                    <h:outputText value="#{cour.credit}"/>
                                </h:column>
                                <h:column>
                                    <f:facet name="header">名额</f:facet>
                                    <h:outputText value="#{cour.quota}"/>
                                </h:column>
                                <h:column>
                                    <f:facet name="header">任课教师</f:facet>
                                    <h:outputText value="#{cour.teacher}"/>
                                </h:column>
                                <h:column>
                                    <f:facet name="header">类别</f:facet>
                                    <h:outputText value="#{cour.category}"/>
                                </h:column>
                                <h:column>
                                    <f:facet name="header">时间</f:facet>
                                    <h:outputText value="#{cour.time}"/>
                                </h:column>
                                <h:column>
                                    <f:facet name="header">周次</f:facet>
                                    <h:outputText value="#{cour.week}"/>
                                </h:column>
                                <h:column>
                                    <f:facet name="header">上课地点</f:facet>
                                    <h:outputText value="#{cour.address}"/>
                                </h:column>
                                <h:column>
                                    <f:facet name="header">操作</f:facet>
                                    <h:commandButton value="选课" action="#{course.selectCourse(cour.id, user.id)}" style="display: none"/>
                                    <button type="button" class="btn btn-primary btn-sm demo3" onclick="selectCourse(this)">选课</button>
                                </h:column>
                            </h:dataTable>
                            <!-- 分页查询，使用js
                            <div id="paging" style="text-align: right;padding-right: 20px;margin-top: 20px;display: none">
                                <h:commandButton action="#{admin.paging('first')}" value="首页" class="btn btn-edit"/>　
                                <h:commandButton action="#{admin.paging('previous')}" value="上一页" class="btn btn-edit"
                                                 style="margin-left: 10px"/>　
                                第 <h:outputLabel value="#{admin.pageNumber + 1}"/> 页　
                                共 <h:outputLabel value="#{admin.totalPage + 1}"/> 页　
                                <h:commandButton action="#{admin.paging('next')}" value="下一页" class="btn btn-edit"/>　
                                <h:commandButton action="#{admin.paging('last')}" value="尾页" class="btn btn-edit" style="margin-left: 10px"/>
                            </div>
                            -->
                        </h:form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 全局js -->
    <script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../js/select-course.js"></script>
    <script type="text/javascript" src="../../js/plugins/sweetalert/sweetalert.min.js"></script>

    <script type="text/javascript" src="../../js/plugins/dataTables/jquery.dataTables.js"></script>
    <script type="text/javascript" src="../../js/plugins/dataTables/dataTables.bootstrap.js"></script>

    <!-- Page-Level Scripts -->
    <script type="text/javascript">
        $(document).ready(function () {
            $('.dataTables-example').dataTable();
        });
    </script>
</h:body>
</html>
